<template lang="html">
  <div class="TanBackBox">
    <el-row class="topBox">
      <el-col :span="18">
        <p>{{$store.state.TanEvaluate.detail.productName}}</p>
        <p class="time gray">点评时间：2017-05-12 13:45:47</p>
        <p style="color:#666; margin-top:5px;">{{$store.state.TanEvaluate.detail.content}}</p>
      </el-col>
      <el-col :span="6" style="border-left:1px solid #ddd; height:100%; padding-left:10px;">
        <p>总体：<span class="big">{{$store.state.TanEvaluate.detail.star}}</span>分</p>
        <p class="star" v-for="item in $store.state.TanEvaluate.detail.starList"><span>{{item.name}}：</span><el-rate disabled v-model="item.score"></el-rate></p>
      </el-col>
    </el-row>
    <el-row class="btmBox" style="margin-top:10px;">
      <el-col :span="11" style="border-right:1px solid #ddd; padding-right:10px;">
        <p>客户姓名：<span class="green">{{$store.state.TanEvaluate.detail.customerName}}（{{$store.state.TanEvaluate.detail.customerMobile}}）</span></p>
        <p>订单号：<span class="green">{{$store.state.TanEvaluate.detail.orderNo}}</span></p>
        <p>有赞单号：<span class="green">{{$store.state.TanEvaluate.detail.yzOrderNo}}</span></p>
        <div class="list">
          <ul>
            <li v-for="list in ($store.state.TanEvaluate.detail.remarks==''?[]:JSON.parse($store.state.TanEvaluate.detail.remarks))">
              <p class="gray">{{list.replyTime}}，{{list.replyPerson}}，{{list.result==0?'仍需回电':'回访完成'}}</p>
              <p>{{list.replyRecord}}</p>
            </li>
          </ul>
        </div>
      </el-col>
      <el-col :span="13">
        <ul class="form">
          <li>
            <span class="title">回访记录：</span>
            <span class="txt">
              <el-input type="textarea" v-model="replyRecord" :rows="3" size="small" placeholder="请输入内容"></el-input>
            </span>
          </li>
          <!-- <li>
            <span class="title">优惠券：</span>
            <span class="txt">
              <el-select size="small" v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </span>
          </li> -->
          <li>
            <span class="title">点评回复：</span>
            <span class="txt">
              <el-input type="textarea" v-model="replyContent" :rows="3" size="small" placeholder="请输入内容"></el-input>
              <p class="gray">tips：回复内容会显示到用户端点评列表，限400字</p>
              <div class="text-left" style="margin-top:10px;">
                <el-button type="danger" size="small" @click="sub(0)" v-show="$store.state.TanEvaluate.detail.commentStatus==0">仍需回电</el-button>
                <el-button style="margin-left:120px;" type="success" size="small" @click="sub(1)" v-show="$store.state.TanEvaluate.detail.commentStatus==0">回访完成</el-button>
              </div>
            </span>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios"
var url;
export default {
  data (){
    return {
      value:'',
      value1:3,
      value2:3,
      value3:3,
      replyContent:'',
      replyRecord:'',
      options: [{
         value: '选项1',
         label: '黄金糕'
       }, {
         value: '选项2',
         label: '双皮奶'
       }, {
         value: '选项3',
         label: '蚵仔煎'
       }, {
         value: '选项4',
         label: '龙须面'
       }, {
         value: '选项5',
         label: '北京烤鸭'
       }]
    }
  },
  methods:{
    sub:function(type){
      this.$store.dispatch('closeDialog','TanEvaluate');
      var that = this;
      axios({
        method: 'post',
        url: url+'/v1/comments/reply',
        params: {
          commentId:this.$store.state.TanEvaluate.id,
          replyContent:that.replyContent,
          replyRecord:that.replyRecord,
          result:type
        }}).then((res)=>{
          that.$message({
            showClose: true,
            message: '回访成功',
            type: 'success'
          });
          this.$store.dispatch('getEvaluateList', {
            commentStatus:0,
            lessThanStar:3,
            pageCount:5,
            pageIndex:1
          });
      }).catch((err)=>{
          that.$message({
            showClose: true,
            message: '回访发生错误：'+err,
            type: 'error'
          });
      })
    }
  },
  computed:{
    getId(){
      return this.$store.state.TanEvaluate.id;
    }
  },
  watch:{
    getId(val){
      //this.replyContent='';
      console.log(this.$store.state.TanEvaluate.detail);
      this.replyContent=this.$store.state.TanEvaluate.detail.replyContent;
    }
  },
  created(){
    url=this.$store.state.url;
    this.replyContent=this.$store.state.TanEvaluate.detail.replyContent;
  }
}
</script>

<style lang="Sass">
.TanBackBox{.el-rate__icon{font-size: 14px;}}
</style>
<style lang="Sass" scoped>
.TanBackBox{
  .topBox{border:1px solid #38CA7C; border-radius:4px; padding: 5px; min-height: 120px; height: auto; background: #EFF7F3;
    p{text-align: left; font-size: 13px; width: 90%;
      .big{ font-size: 28px; color: #DE013C;}
    }
    .star{width: 100%;
      span{ display: inline-block; font-size: 12px;}
    }
    .time{font-size: 12px;}
    .el-rate{display: inline-block; width: 105px; vertical-align: top; }
    .el-rate__icon{font-size: 14px;}
  }
  .btmBox{position: relative;
    p{text-align: left; font-size: 13px;
      span{font-size: 13px;}
    }
    .list{ height: 200px; overflow: auto; margin-top: 30px;
      ul{ margin-left: 20px;  color: #13CE66;
        li{position: relative; font-size: 20px; padding-top: 10px;
          p{ color: #333; font-size: 12px; margin: 0;}
        }
        li::after{
          content: "";
          position:absolute;
          left: -17px; top: 15px;
          width: 1px;
          height: 100%;
          background: #13CE66;
        }
        li:first-child{padding-top: 0px;}
      }

    }
  }
  .form{ padding-top: 10px;
    li{ display: flex; margin-top: 10px;
      span{display: inline-block;}
      .title{flex:0 0 80px; font-size: 12px; text-align: right;}
      .txt{flex:1;
        p{font-size: 12px;}
      }
    }
    .el-select{width: 100%;}
  }

  .btmBox::before{content: ""; position: absolute; left: 0; top: 55px; width: 44%; height: 1px; background: #ddd;}
}
</style>
